<template>
  <el-dialog title="会话明细" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="950px">
    <div class="content-big">
      <div class="content-right">
        <el-table
          :data="tableDataList"
          :max-height="tabelHeight"
          ref="companylabelList"
        >
          <el-table-column
            :label="item.label"
            align="center"
            v-for="(item, index) in tableColumns"
            :key="index"
            :prop="item.key"
            :min-width="item.minWidth ? item.minWidth : ``"
            :fixed="item.fixed ? item.fixed : false"
            :show-overflow-tooltip="true"
          >
            <template slot="header" v-if="item.showHeaderTip">
              <div>
                {{ item.label }}
                <el-tooltip effect="dark" :content="item.showHeaderTip"  placement="top">
                  <span><i class="el-icon-question"></i></span>
                </el-tooltip>
              </div>
            </template>
            <!--用于表格自定义-->
            <template slot-scope="scope">
              <div >{{ scope.row[item.key] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="220">
            <template slot-scope="scope">
              <el-button type="text" size="small">查看内容</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>


    <div class="footer-btn" slot="footer">
      <el-button  @click="handleCloseDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>


import {listUser} from "@/api/system/user";
import MultipleSelect from "@/views/components/multipleSelect.vue";

export default {
  name: 'sessionDetails',
  components: {
    MultipleSelect,
    'SelectType': () => import('@/views/components/SelectType.vue'),//导出弹窗
  },
  data() {
    return {
      // 查询参数
      tabelHeight:400,
      input3:null,//群查找
      radio:null,//
      options: [{
        value: 1,
        label: '✔',
      }, {
        value: 2,
        label: '✖',
      }, {
        value: 3,
        label: '▬',
      }],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName1: null,
        userName2: null,
        userName3: null,
        userName4: null,
        userName5: null,
        userName6: null,
        userName7: null,
        userName8: null,
        userName9: null,
        userName10: null,
        userName11: null,
        userName12: null,
        userName13: null,
        userName14: null,
      },
      tableColumns: [
        {key: 'name', label: `SOP任务`, visible: true, minWidth: 150},
        {key: 'create_time', label: `已发送对象数`, visible: true, minWidth: 150, showHeaderTip: '该天任务已实际发送的对象数',},
        {key: 'time1', label: `回复率`, visible: true, minWidth: 150,showHeaderTip: '已回复对象数/该天内容实际已发送的对象数，每个对象每日发的消息中，任意一条在统计时效内有回复即算已回复',},
        {key: 'time2', label: `流失率`, visible: true, minWidth: 150, showHeaderTip: '24小时内已回复会话数/客户发起的会话数*100%',},
      ],
      tableDataList:[],
      total: 8, // 表格的总条数
      showSelectSmartTags: false,//智能标签
      tableHeight: 600,
      dateRange1: [],
      selection:null,
    }
  },
  created() {
    this.tableDataList = [];
    for (let i = 0; i < 10; i++) {
      let obj = {
        name: '小红',
        create_time: '2024-09-13',
        operate: true,
        id:i+1,
      }
      this.tableDataList.push(obj);
    }
  },
  mounted() {
  },
  watch: {},
  methods: {
    getNumber(obj){
      console.log('获取最大值',obj);
    },
    getValue(obj){
      console.log('获取行',obj);
    },
    getTomeValue(obj){
      console.log('获取行',obj);
    },
    getShowQroup() {
      this.showSearchGroup=true;
    },    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        })
      }
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  position: relative;


}
.userInfo {
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-items: center;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }

  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .groupInfo {
    background-color: rgb(48, 112, 255);
    align-self: flex-start;
    width: 40px;
    padding: 2px 7px;
    display: inline-block;
    color: #fff;
    border-radius: 5px;
    margin-top: 10px;
    margin-left: 10px;

  }
  .user-big {
    display: flex;
    flex-direction: column;
    line-height: 18px;
  }
}
.content-big {
  display: flex;
  height: 100%;
  .title {
    color: #2f333c;
    font-weight: 700;
    padding: 12px 20px;
    display: flex;
    align-items: center;

    padding-bottom: 10px;
  }
  .content-left1 {
     width: 250px;
    border-right: 1px solid #eee;
    overflow-y: auto;

   ::v-deep .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
    .user-list {
      li {
        padding:5px 20px;
        margin: 0px 10px;
        &.active {
          background: #ebf2ff;
        }
      }
    }
  }
  .content-left {
    width: 410px;
    background: #fff;
    border-right: 1px solid #eee;

  }
  .content-right {
    flex: 1;
    overflow-y: auto;
    padding-top: 10px;
  }
  .content-right1 {
    width:250px;
    border-right: 1px solid #eee;

    .user-list {
      margin: 0px 20px;

      li {
        display: flex;
        justify-content: space-between;
        height: 40px;
        display: flex;
        align-items: center;
      }
    }
  }
}
.el-form {
  padding: 0px 20px;
  .el-form-item {
    margin-bottom: 20px;
    margin-right: 0px;
    display: flex;
    .select-left {
      width: 132px;
      margin-right:5px;

    }
    .select-right {
      width: 224px !important;
    }
  }
  ::v-deep .el-radio-group {
    .el-radio__input {
      display:none;
    }
    .el-radio {
      margin-right: 0px;
    }
    .el-radio__label {
      height: 32px;
      display: flex;
      justify-items: center;
      border: 1px solid #eee;
      padding: 0px 20px;
      align-items: center;
      border-radius: 5px;
    }
  }
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 600px;
  padding: 0px;
}

.el-checkbox-group {
  margin-top: 20px;

  .el-checkbox {
    margin-bottom: 12px;
    width: 150px;
  }
}

.exclusion {
  margin: 12px 0px;
  padding: 12px 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f0;
}
.item-title {
  margin-bottom: 5px;
}
.userInfo{
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }
  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.nameInfo {
  border-radius: 4px;
  margin: 4px 0;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  list-style: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  .number {

  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }

  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.search {
  display: flex;

  ::v-deep.el-input__inner {
    border-right: none !important;
    border-radius: 4px 0px 0px 0px;
  }

  ::v-deep .el-button--default {
    border-radius: 0px 4px 4px 0px;
    padding: 0px 10px;
  }
}
::v-deep .el-radio__label {
  display: none;
}
.form-div {
  width: 200px;
  margin-left: 10px;
}
.el-form {
  display: flex;
  .el-form-item {
   margin-right: 10px;
  }
}
.dui {
  color: #00c270;
}
.cuo {
  color: #C03639;
}
.zhong {
  color: #efbb78;
}
.showTips {
  padding: 0px;
  margin: auto;
}
.exportBtn {
  position: absolute;
  right: 20px;
  top: 65px;
}
</style>
